<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="whole">
        <!-- 头部导航 -->
       <div class="top">TO DO LIST</div>
       <!-- 主体部分 -->
       <div class="main">
           <!-- 上面的输入框部分 -->
           <div class="main-one">
               <!-- 左侧输入框 -->
               <div class="one-text">
                   <input type="text" name="shuru" placeholder="添加代办，回车或点击右侧+即可" class="firstinput">
                   <button id="btn1">+</button>
               </div>
               <!-- 中间图片 -->
               <div class="picture">
                  <img src="img/太阳.svg">
               </div>
               <script>
                var img=document.querySelector('.picture').querySelector('.img');
                var body=document.querySelector('body');
                var top=document.querySelector('.top');
                var flag=0;
                img.addEventListener('click',function(){
                   if(flag==0){
                    img.src='img/月亮.svg';
                    body.style.backgroundColor='#333';
                    top.style.color='white';
                  flag=1;
              }else{
                  img.src='img/太阳.svg'
                  body.style.backgroundColor='#ededed';
                  top.style.color='black';
                  flag=0;
              }
          })
               </script>
               <!-- 右侧输入框 -->
               <div class="one-text">
                   <div class="north">
                       共有<span class="zonggong">   </span>任务，已经完成了<span class="wancheng">   </span>任务
                   </div>
               </div>
           </div>
           <!-- 下面的待办，已办 -->
           <div class="main-two">
               <!-- 左侧待办 -->
               <div class="two-text">
                   <div class="two-top">
                       <h3>待办</h3>
                   </div>
                   <div  class="two-bottom">
                       <img src="img/待办.svg" id="img1" alt="">
                       <ul class="undone">
                       </ul>
                   </div>
               </div>
               <!-- 中间图片 -->
               <div class="photograph">
                   <img src="img/vs.479c6aff.svg">
               </div>
               <!-- 右侧已办 -->
               <div class="two-text">
                   <div class="right-top">
                       <h3>已办</h3>
                   </div>
                   <div class="right-bottom">
                       <img src="img/noContent.16f8cc7c.svg" id="img2" alt="">
                       <ul class="secondright"></ul>
                   </div>
               </div>
           </div>
       </div>
       <!-- 底部 -->
       <div class="footer">
           <div class="roof">author+<a href="#">ll</a></div>
           <div class="middle"><a href="#">vue3+vite</a></div>
           <div class="bottom"><a href="#">Source code</a></div>
       </div>
    </div>
    <script>
        var btn1=document.querySelector('#btn1');
        var input=document.querySelector('.firstinput');
        var leftul=document.querySelector('.undone');
        var onetext=document.querySelector('.one-text')
        var sencondinput = document.querySelector('.north')
        var rightul=document.querySelector('.secondright');
        input.onfocus=function(){
            this.style.color='#333333';
            onetext.style.backgroundColor='white';
            onetext.style.boxShadow='none';
        }
         input.onblur=function(){
             this.style.color='#cccccc';
             onetext.style.color='#fefefe98';
             onetext.style.boxShadow='13px 15px 16px #99999957'
        }
        
        //添加事件
        btn1.onclick=function(){
            if(input.value==""){
                alert('不要捣蛋（请输入内容）');
                return;
            }else{
        var li=document.createElement('li');
        li.innerHTML='<div class="circle"></div>'+'<div class="juxing">'+input.value+'</div>'+'<a href="javascript:;" class="shanchu">×</a>'
                }

        leftul.appendChild(li);
        tu();

        var undonelen = leftul.children.length;
        var donelen = rightul.children.length;
        var alllen = undonelen+donelen;

        sencondinput.innerHTML = "共有"+alllen+"任务,已经完成了"+donelen+"任务。";
        //删除待办事件
        var as=document.querySelectorAll('.shanchu');
        for (var i=0;i<as.length;i++){
            as[i].onclick=function(){
                if(confirm('确定要删除吗？')){
                leftul.removeChild(this.parentNode);
                tu();
                var undonelen1 = leftul.children.length;
                var donelen1 = rightul.children.length;
                var alllen1 = undonelen1+donelen1;

                sencondinput.innerHTML = "共有"+alllen1+"任务,已经完成了"+donelen1+"任务。";
                 }
              }
         }
        //左边转移到右边
        var btn2=leftul.querySelectorAll('.circle');

        for(var j=0;j<btn2.length;j++){
            btn2[j].onclick=function(){
                var lili=this.parentNode.cloneNode(true)
                rightul.appendChild(lili);
                leftul.removeChild(this.parentNode);
                tu();
                var undonelen2 = leftul.children.length;
                var donelen2 = rightul.children.length;
                var alllen2 = undonelen2+donelen2;

                sencondinput.innerHTML = "共有"+alllen2+"任务,已经完成了"+donelen2+"任务。";

        var btn3=rightul.querySelectorAll('.circle')
          for(var j=0;j<btn3.length;j++){
              btn3[j].onclick=function(){
                  var lilili=this.parentNode.cloneNode(true);
                  leftul.appendChild(lilili);
                  rightul.removeChild(this.parentNode);
                  tu();
                  var undonelen3 = leftul.children.length;
                  var donelen3 = rightul.children.length;
                  var alllen3 = undonelen3+donelen3;

                  sencondinput.innerHTML = "共有"+alllen3+"任务,已经完成了"+donelen3+"任务。";
                 }
              }
         var rightas=rightul.querySelectorAll('a');
         for(var n=0;n<rightas.length;n++){
             rightas[n].onclick=function(){
                 if(confirm("确定要删除嘛？")){
                     rightul.removeChild(this.parentNode);
                     tu();
                     var undonelen4 = leftul.children.length;
                     var donelen4 = rightul.children.length;
                     var alllen4 = undonelen4+donelen4;

                     sencondinput.value = "共有"+alllen4+"任务,已经完成了"+donelen4+"任务。";
                    }
                }
            }
        }
    }
 }
         var tu=function(){
             if((leftul.childElementCount)!=0){
                 img1.style.display='none';
             }else{
                 img1.style.display='block';
             }
             if((rightul.childElementCount)!=0){
                 img2.style.display='none';
             }else{
                 img2.style.display='block';
             }
         }

    </script>
</body>
</html>